// 轮播图基础逻辑 mixin
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    autoPlayInterval: {
      type: Number,
      default: 5000
    },
    containerClass: {
      type: String,
      default: ''
    }
  },
  
  emits: ['slideChange', 'itemClick'],
  
  data() {
    return {
      currentIndex: 0,
      isAnimating: false,
      autoPlayTimer: null,
      touchStartX: 0,
      touchStartTime: 0,
      needSwitchImageAnimation: true
    }
  },
  
  computed: {
    showCarouselControls() {
      return this.items.length > 1
    }
  },
  
  methods: {
    goToSlide(index) {
      if (this.isAnimating || index === this.currentIndex) return
      
      this.isAnimating = true
      this.currentIndex = index
      this.$emit('slideChange', index)
      
      setTimeout(() => {
        this.isAnimating = false
      }, 600)
    },
    
    nextSlide() {
      const nextIndex = (this.currentIndex + 1) % this.items.length
      this.goToSlide(nextIndex)
    },
    
    previousSlide() {
      const prevIndex = (this.currentIndex - 1 + this.items.length) % this.items.length
      this.goToSlide(prevIndex)
    },
    
    handleItemClick(index) {
      if (index !== this.currentIndex && this.showCarouselControls) {
        this.goToSlide(index)
      } else {
        // 点击当前活跃项时，触发项点击事件
        this.$emit('itemClick', {
          index: index,
          item: this.items[index]
        })
      }
    },
    
    handleTouchStart(e) {
      if (!this.showCarouselControls) return
      this.pauseAutoPlay()
      this.touchStartX = e.touches ? e.touches[0].clientX : e.clientX
      this.touchStartTime = Date.now()
    },
    
    handleTouchMove(e) {
      if (!this.touchStartX || !this.showCarouselControls) return
      e.preventDefault()
    },
    
    handleTouchEnd(e) {
      if (!this.touchStartX || !this.showCarouselControls) return
      
      const currentX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX
      const deltaX = currentX - this.touchStartX
      const deltaTime = Date.now() - this.touchStartTime
      const velocity = Math.abs(deltaX) / deltaTime
      
      const threshold = 80
      const fastSwipe = velocity > 0.5 && Math.abs(deltaX) > 30
      
      if (Math.abs(deltaX) > threshold || fastSwipe) {
        if (deltaX > 0) {
          this.previousSlide()
        } else {
          this.nextSlide()
        }
      }
      
      this.touchStartX = 0
      this.touchStartTime = 0
      this.resumeAutoPlay()
    },
    
    startAutoPlay() {
      if (!this.autoPlay || !this.showCarouselControls) return
      
      this.autoPlayTimer = setInterval(() => {
        this.nextSlide()
      }, this.autoPlayInterval)
    },
    
    pauseAutoPlay() {
      if (this.autoPlayTimer) {
        clearInterval(this.autoPlayTimer)
        this.autoPlayTimer = null
      }
    },
    
    resumeAutoPlay() {
      if (this.autoPlay) {
        this.startAutoPlay()
      }
    }
  },
  
  watch: {
    autoPlay: {
      handler(newVal) {
        if (newVal) {
          this.startAutoPlay()
        } else {
          this.pauseAutoPlay()
        }
      },
      immediate: false
    }
  },

  mounted() {
    if (this.autoPlay) {
      this.startAutoPlay()
    }

    if (this.$refs.track) {
      this.$refs.track.addEventListener('touchstart', this.handleTouchStart)
      this.$refs.track.addEventListener('touchmove', this.handleTouchMove)
      this.$refs.track.addEventListener('touchend', this.handleTouchEnd)
      this.$refs.track.addEventListener('mousedown', this.handleTouchStart)
      this.$refs.track.addEventListener('mousemove', this.handleTouchMove)
      this.$refs.track.addEventListener('mouseup', this.handleTouchEnd)
    }
  },
  
  beforeUnmount() {
    this.pauseAutoPlay()
    
    if (this.$refs.track) {
      this.$refs.track.removeEventListener('touchstart', this.handleTouchStart)
      this.$refs.track.removeEventListener('touchmove', this.handleTouchMove)
      this.$refs.track.removeEventListener('touchend', this.handleTouchEnd)
      this.$refs.track.removeEventListener('mousedown', this.handleTouchStart)
      this.$refs.track.removeEventListener('mousemove', this.handleTouchMove)
      this.$refs.track.removeEventListener('mouseup', this.handleTouchEnd)
    }
  }
}